<template>
  <el-row id="exam-choice-problem-box">
    <Breadcrumb :breadcrumb="breadcrumb"/>
    <div id="filter-box">
        <el-col :span="11" :offset="1" id="problem-difficulty-box">
            <el-row>
                <el-col :span="4">
                <label class="tag1">难度:</label>
                </el-col>
                <el-col :span="20" class="radio-group">
                <el-radio-group v-model="problemDifficultyValue" @change="refreshProblemList">
                    <el-radio label="全部">全部</el-radio>
                    <el-radio label="简单">简单</el-radio>
                    <el-radio label="中等">中等</el-radio>
                    <el-radio label="困难">困难</el-radio>
                </el-radio-group>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="6" :offset="6" id="problem-label-box">
            <el-row>
              <el-button
              id="auditButton"
              class="buttonStyle1"
              type="primary"
              @click="addProblemListToExamButton()"
              >确认</el-button
              >
              <el-button
              id="auditButton"
              class="buttonStyle2"
              @click="goBack()"
              >取消并返回上一页</el-button
              >
            </el-row>
        </el-col>
    </div>
    <el-table
      id="problem-table"
      :data="problemData"
      style="width: 100%"
      ref="multipleTable"
      highlight-current-row
      @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#fafafa' }"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        id="fold-column-box"
        type="expand"
        width="70"
        label="查看"
      >
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand" v-if="problemType == '选择题'">
            <el-form-item label="题目">
              <span>{{ props.row.problem }}</span>
            </el-form-item>
            <el-form-item label="选项A">
              <span>{{ props.row.choiceOp1 }}</span>
            </el-form-item>
            <el-form-item label="选项B">
              <span>{{ props.row.choiceOp2 }}</span>
            </el-form-item>
            <el-form-item label="选项C">
              <span>{{ props.row.choiceOp3 }}</span>
            </el-form-item>
            <el-form-item label="选项D">
              <span>{{ props.row.choiceOp4 }}</span>
            </el-form-item>
            <el-form-item label="答案">
              <span>{{ props.row.choiceAnsw }}</span>
            </el-form-item>
            <el-form-item label="解析">
              <span>{{ props.row.choiceParse }}</span>
            </el-form-item>
          </el-form>
          <el-form label-position="left" inline class="demo-table-expand" v-if="problemType == '简答题'">
            <el-form-item label="题目">
              <span>{{ props.row.problem }}</span>
            </el-form-item>
            <el-form-item label="答案">
              <span>{{ props.row.essayAnsw }}</span>
            </el-form-item>
            <el-form-item label="解析">
              <span>{{ props.row.essayParse }}</span>
            </el-form-item>
            <el-form-item label="难度">
              <span>{{ props.row.difficulty }}</span>
            </el-form-item>
          </el-form>
          <el-form label-position="left" inline class="demo-table-expand" v-if="problemType == '判断题'">
            <el-form-item label="题目">
              <span>{{ props.row.problem }}</span>
            </el-form-item>
            <el-form-item label="答案">
              <span>{{ props.row.trueOrFalseAnsw }}</span>
            </el-form-item>
            <el-form-item label="解析">
              <span>{{ props.row.trueOrFalseParse }}</span>
            </el-form-item>
            <el-form-item label="难度">
              <span>{{ props.row.difficulty }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="序号" type="index" width="90"> </el-table-column>
      <el-table-column prop="problem" label="题目" width="650">
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="90">
      </el-table-column>
      <el-table-column label="操作" width="270">
        <template>
          <el-button size="mini"
            >查看</el-button>
            <el-button size="mini"
            >选择</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
</template>
<script>
import Breadcrumb from '@/components/common/Breadcrumb';
import {mapState,mapMutations} from 'vuex'
export default {
    name: "ExamAddProblem",
    components: {
      Breadcrumb,
    },
    data(){
        return{
          breadcrumb:[
            {name:"试卷管理",path:"problem"},
            {name:"新增试卷",path:"problemAdd"},
            {name:"添加题目",path:""},
          ],
          problemType:this.$route.params.problemType,
          // courseNameValue:"大学英语",
          searchValue:"",
          problemDifficultyValue: "全部",
          problemLabelValue: "",
          problemData: [
          ],
          labelOptions: [
              {
              value: "必考题",
              label: "必考题",
              },
              {
              value: "压轴题",
              label: "压轴题",
              },
              {
              value: "基础题",
              label: "基础题",
              },
              {
              value: "期末考题",
              label: "期末考题",
              },
          ],
          multipleSelectionList: [],
          uuIdList:[]
        }
    },
    created(){
        this.GetProblemList(this.course.courseName,this.problemDifficultyValue)
    },
    methods: {
        ...mapMutations('exam', [
            'addProblemToExam'
        ]),
        refreshProblemList(){
            this.GetProblemList(this.course.courseName,this.problemDifficultyValue)
        },
        
        GetProblemList(courseName,problemDifficultyValue){
          // console.log(this.problemType)
          
          // console.log(this.$route.params)
          if(this.problemType=="选择题"){
            this.GetChoiceList(courseName,problemDifficultyValue)
          }
          else if(this.problemType=="判断题"){
            this.GetTrueOrFalseList(courseName,problemDifficultyValue)
          }
          else if(this.problemType=="简答题"){
            this.GetEssayList(courseName,problemDifficultyValue)
          }
        },
        GetChoiceList(courseName,problemDifficultyValue){
          this.axios.get("/choice/toexam/"+courseName+"/"+problemDifficultyValue)
            .then(response => {
              if(response.status == 200){
                this.problemData = response.data.data;
              }
            }).catch(error => alert(error));
        },
        GetTrueOrFalseList(courseName,problemDifficultyValue){
          this.axios.get("/trueOrFalse/toexam/"+courseName+"/"+problemDifficultyValue)
            .then(response => {
              if(response.status == 200){
                this.problemData = response.data.data;
                console.log(this.problemData)
              }
            }).catch(error => alert(error));
        },
        GetEssayList(courseName,problemDifficultyValue){
          this.axios.get("/essay/toexam/"+courseName+"/"+problemDifficultyValue)
            .then(response => {
              if(response.status == 200){
                this.problemData = response.data.data;
                console.log(this.problemData)
              }
            }).catch(error => alert(error));
        },
        handleSelectionChange(valList) {
            this.multipleSelectionList=valList
            // console.log(this.multipleSelectionList)
        },
        addProblemListToExamButton(){
          var ProblemData=this.multipleSelectionList
          var problemType=this.problemType
          this.addProblemToExam({ProblemData,problemType})
          this.$refs.multipleTable.clearSelection()
          this.$router.back()
        },
        hintMessage(value){
          this.$message({
            showClose: true,
            message: value,
            type: 'success'
          });
        },
        goBack(){
          this.$router.go(-1)
        },
    },
    computed:{
      ...mapState('course', {
          course:'course',
      }),
    },
};
</script>
<style scoped>
/* 自定义的样式 */
#exam-choice-problem-box{
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 20px;
    user-select: none;

    background-color: #f6fafb !important;
    height: 680px;
}

#exam-choice-problem-box #problem-search-box {
    padding-bottom: 10px;
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #dcdfe6 !important;
    margin-bottom: 30px;
    line-height: 40px;
}

.tag1 {
  /* font-weight: normal; */
  line-height: 40px;
  margin-bottom: 0px;
}
#problem-label-box {
  height: 40px;
  line-height: 40px;
}
#filter-box{
  margin-top: 40px;
  height: 40px;
  margin-bottom: 30px;
}
.goBack-box{
  text-align: right;
  margin-top: -60px;
  margin-bottom: 30px;
}
</style>

<style>
/* 修改element-ui的样式 */
#exam-choice-problem-box #problem-label {
  width: 350px;
  height: 40px !important;
}
#exam-choice-problem-box .radio-group {
  display: block;
  line-height: 40px;
}
#exam-choice-problem-box .buttonStyle1 {
  width: 80px;
  height: 30px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-right: 10px;
}
#exam-choice-problem-box .buttonStyle2 {
  width: auto;
  height: 30px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-right: 10px;
}
</style>
